<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时聊天室</title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .chat-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .chat-header {
            background-color: #2c3e50;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 20px;
        }
        .chat-messages {
            height: 400px;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .message {
            padding: 10px;
            border-radius: 8px;
            max-width: 80%;
        }
        .message.user {
            background-color: #3498db;
            color: white;
            align-self: flex-end;
        }
        .message.other {
            background-color: #ecf0f1;
            color: #333;
            align-self: flex-start;
        }
        .message.system {
            background-color: #f1c40f;
            color: #333;
            align-self: center;
            font-size: 0.9em;
            text-align: center;
        }
        .message strong {
            display: block;
            margin-bottom: 3px;
        }
        .chat-input {
            display: flex;
            padding: 15px;
            border-top: 1px solid #eee;
        }
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            outline: none;
        }
        .chat-input button {
            padding: 10px 20px;
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .chat-input button:hover {
            background-color: #34495e;
        }
        .join-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
            text-align: center;
            max-width: 400px;
            margin: 50px auto;
        }
        .join-container h2 {
            color: #2c3e50;
        }
        .join-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .join-container button {
            width: 100%;
            padding: 10px;
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .join-container button:hover {
            background-color: #34495e;
        }
        .error-message {
            color: #e74c3c;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="join-container" class="join-container">
        <h2>加入聊天室</h2>
        <input type="text" id="username" placeholder="请输入您的昵称" required>
        <button id="join-btn">进入聊天室</button>
        <div id="error-message" class="error-message"></div>
    </div>

    <div id="chat-container" class="chat-container" style="display: none;">
        <div class="chat-header">
            <h1>实时聊天室</h1>
            <p id="current-users">当前在线: 0 人</p>
        </div>
        <div class="chat-messages" id="messages"></div>
        <div class="chat-input">
            <input type="text" id="message-input" placeholder="输入消息..." disabled>
            <button id="send-btn" disabled>发送</button>
        </div>
    </div>

    <script>
        // 初始化socket连接
        const socket = io();
        let username = '';

        // DOM元素
        const joinContainer = document.getElementById('join-container');
        const chatContainer = document.getElementById('chat-container');
        const usernameInput = document.getElementById('username');
        const joinBtn = document.getElementById('join-btn');
        const messageInput = document.getElementById('message-input');
        const sendBtn = document.getElementById('send-btn');
        const messagesDiv = document.getElementById('messages');
        const currentUsers = document.getElementById('current-users');
        const errorMessage = document.getElementById('error-message');

        // 加入聊天室
        joinBtn.addEventListener('click', () => {
            username = usernameInput.value.trim();
            if (username) {
                socket.emit('checkUsername', username, (isAvailable) => {
                    if (isAvailable) {
                        socket.emit('join', username);
                        joinContainer.style.display = 'none';
                        chatContainer.style.display = 'block';
                        messageInput.disabled = false;
                        sendBtn.disabled = false;
                        messageInput.focus();
                        errorMessage.textContent = '';
                    } else {
                        errorMessage.textContent = '该用户名已被使用，请选择其他用户名';
                    }
                });
            }
        });

        // 发送消息
        sendBtn.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });

        function sendMessage() {
            const message = messageInput.value.trim();
            if (message) {
                socket.emit('message', message);
                appendMessage({
                    username: username,
                    text: message,
                    type: 'user'
                });
                messageInput.value = '';
                messageInput.focus();
            }
        }

        // 接收消息
        socket.on('message', (data) => {
            appendMessage(data);
        });

        // 在线用户更新
        socket.on('usersUpdate', (count) => {
            currentUsers.textContent = `当前在线: ${count} 人`;
        });

        // 系统消息
        socket.on('system', (message) => {
            appendMessage({
                text: message,
                type: 'system'
            });
        });

        // 滚动到底部
        function scrollToBottom() {
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }

        // 添加消息到界面
        function appendMessage(data) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${data.type}`;
            
            if (data.type !== 'system') {
                const usernameSpan = document.createElement('strong');
                usernameSpan.textContent = data.username;
                messageDiv.appendChild(usernameSpan);
            }
            
            const textSpan = document.createElement('span');
            textSpan.textContent = data.text;
            messageDiv.appendChild(textSpan);
            
            messagesDiv.appendChild(messageDiv);
            scrollToBottom();
        }
    </script>
</body>
</html>
    